<template>
  <div class="user-auth">
    <a-card :body-style="{ padding: '32px' }" :bordered="false">
      <div class="auth-title">
        <div class="title">认证会员申请 - 2.材料上传</div>
        <div class="desc">
          请提前准备好如下相关电子文件档，如不了解，请联系客服电话：{{
            config.p_phone
          }}
        </div>
      </div>
      <div class="auth-content">
        <a-steps :current="1">
          <a-step
            v-for="item in [
              '材料准备',
              '材料信息上传',
              '基本信息填写',
              '完成待审核',
              '认证成功'
            ]"
            :key="item"
            :title="item"
          />
        </a-steps>
        <a-form-model
          :model="model"
          ref="form"
          :rules="rules"
          style="margin-top: 40px;"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 12 }"
          @submit="onSubmit"
        >
          <a-form-model-item :label="rules.license[0].title" prop="license">
            <Upload v-model="model.license" text="" />
          </a-form-model-item>

          <a-form-model-item :label="rules.legalCard[0].title" prop="legalCard">
            <Upload v-model="model.legalCard" text="" />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.protoAgree[0].title"
            prop="protoAgree"
          >
            <Upload v-model="model.protoAgree" text="" />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.clientCard[0].title"
            prop="clientCard"
          >
            <Upload v-model="model.clientCard" text="" />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.clientBook[0].title"
            prop="clientBook"
          >
            <Upload v-model="model.clientBook" text="" />
          </a-form-model-item>

          <a-form-model-item :label="rules.dpayPic[0].title" prop="dpayPic">
            <Upload v-model="model.dpayPic" text="" />
          </a-form-model-item>

          <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
            <a-button size="large" style="margin-right: 12px;" @click="prev">
              上一步
            </a-button>
            <a-button htmlType="submit" type="primary" size="large">
              下一步
            </a-button>
          </a-form-item>
        </a-form-model>
      </div>
    </a-card>
  </div>
</template>

<script>
import Upload from "@/components/upload/Upload";
import storage from "@/utils/storage";

const MODEL = {
  license: "",
  legalCard: "",
  clientCard: "",
  clientBook: "",
  protoAgree: "",
  dpayPic: ""
};
export default {
  data() {
    return {
      model: storage.getItem("USER_AUTH_STEP2") || { ...MODEL }
    };
  },
  components: {
    Upload
  },
  watch: {
    model: {
      handler() {
        storage.setItem("USER_AUTH_STEP2", this.model);
      },
      deep: true
    }
  },
  computed: {
    rules() {
      return {
        license: [
          {
            title: "营业执照或律师执照",
            required: true,
            message: "请上传营业执照或律师执照",
            trigger: "submit"
          }
        ],
        legalCard: [
          {
            title: "法人身份证照片",
            required: true,
            message: "请上传法人身份证照片",
            trigger: "submit"
          }
        ],
        protoAgree: [
          {
            title: "《会员协议书》",
            required: true,
            trigger: "submit",
            message: "请上传《会员协议书》"
          }
        ],
        clientCard: [
          {
            title: "被授权委托人身份证照片",
            required: false,
            message: "请上传被授权委托人身份证照片",
            trigger: "submit"
          }
        ],
        clientBook: [
          {
            title: "《被授权委托人授权书》",
            required: false,
            trigger: "submit",
            message: "请上传《被授权委托人授权书》"
          }
        ],
        dpayPic: [
          {
            title: "会员费交款凭证照片",
            required: false,
            message: "请上传会员费交款凭证照片",
            trigger: "submit"
          }
        ]
      };
    }
  },
  methods: {
    prev() {
      this.$router.go(-1);
    },
    onSubmit(e) {
      e.preventDefault();
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.$router.push("/user/auth/step3");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.user-auth {
  .auth-title {
    padding-left: 30px;
    margin-bottom: 30px;

    .title {
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid @border-color;
      color: @primary-color;
      padding-bottom: 4px;
    }

    .desc {
      padding-top: 8px;
      font-size: 16px;
      color: @text-color-2;
    }
  }

  .auth-content {
    width: 720px;
    padding: 10px 0;
    margin: 0 auto;
  }
}

.upload-wrapper {
  display: flex;
  color: @primary-color;
  align-items: center;

  .example-wrapper {
    cursor: pointer;
    .icon-right {
      width: 10px;
      height: 10px;
    }
  }
}
</style>
